<template>
  <el-dialog title="选择可用产品" :width="dialogWidth" :visible.sync="isShowDialogPickProduct" @close="closeDialog" append-to-body>
    <datagrid-search :gridSearch="gridSearch"></datagrid-search>
    <el-table
            ref="singleTable"
            :data="prodData"
            @selection-change="changeSelected"
            highlight-current-row
            style="width: 100%">
             <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
             <el-table-column
            property="code"
            label="产品代码">
            </el-table-column>
            <el-table-column
            property="name"
            label="产品名称"
            width="120">
            </el-table-column>
            <el-table-column
            property="spec"
            label="规格">
            </el-table-column>
            <el-table-column
            property="price_type"
            :formatter = "formatterPriceType"
            label="计价方式">
            </el-table-column>
            <el-table-column
            property="remark"
            label="备注">
            </el-table-column>
        </el-table>
    <datagrid-page ></datagrid-page>
    <div class="dialog-form">
      <div slot="footer" class="dialog-footer">
        <span style="padding-right:10px">已选:商品(<span style="color:red;">{{selectedCount}}</span>)</span>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<style scoped>
.dialog-form{padding:20px 50px 5px 20px;}
.dialog-footer{display: flex;justify-content: flex-end;align-items: center;}
</style>
<script>
import DatagridSearch from 'components/common/datagridSearch/DatagridSearch';
import DatagridPage from 'components/common/datagridPage/DatagridPage';
export default {
  components:{
    DatagridSearch,
    DatagridPage
  },
  created(){
    
  },
  props:{
    isShow:{
      type:Boolean,
      default(){
        return false;
      }
    },
  },
  data(){
    return {
      isShowDialogPickProduct:false,
      dialogWidth:'900px',
      currentPageSize:20,
      total:2,
      pageSizeOption:[20,40,60,100,200,500,1000],
      currentPage:1,
      prodData:[ 
        {code:"A001",is_selected:false,name:'苹果',spec:'红富士',price_type:'按重量',youzan_name:'苹果 350g',sell_price:'12',create_time:'2013/12/12 12:12:12'},
        {code:"A002",is_selected:true,name:'牛奶',spec:'光明牛奶',price_type:'按数量',youzan_name:'光明牛奶 350ml',sell_price:'5',create_time:'2013/12/12 12:12:12'},
      ],
      gridSearch:[
        {field:'code',label:'产品代码',type:'text',placeholder:'产品代码'},
        {field:'name',label:'产品名称',type:'text',placeholder:'产品名称'},
        {field:'spec',label:'规格',type:'text',placeholder:'规格'}
      ],
      selectedCount:0
    }
  },
  methods:{
    closeDialog(){
      this.isShowDialogPickProduct = false;
      this.$emit('closeDialogPickProduct');
    },
    formatterPriceType(row,colmun){
        return row.price_type == 1 ? '按数量' : row.price_type == 2 ? '按重量' : '';
    },
    changeSelected(data){
      this.selectedCount = data.length;
    }
  },
  computed:{

  },
  watch:{
    isShow(newValue){
      this.isShowDialogPickProduct = newValue;
    }
  }
}


</script>